import { Modal, Button, Table, Form, Row, Col,TreeSelect,Input  } from 'antd';
import { connect } from 'dva';
import React from 'react';

const { TreeNode } = TreeSelect;
const { Search } = Input;

class QuoteAnswer extends React.Component {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  onChange = (value,flag) => {
    if(this.props.queryAnswer){
      this.props.queryAnswer(value,flag)
    }
  };

  render() {
    const renderTreeNode = (data) => {
      return data.map(item => {
        if (item.children) {
          return (
            <TreeNode title={item.text} key={item.data.path} value={item.id} id={item.id}>
              {renderTreeNode(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode title={item.text} key={item.data.path} value={item.id} id={item.id} />;
      });
    }

    const columns = [
      {
        title: '标准问',
        dataIndex: 'question',
        key: 'question',
      },
      {
        title: '答案',
        dataIndex: 'answer',
        key: 'answer',
        render: text => {
          return <div dangerouslySetInnerHTML={{ __html: text }} />;
        },
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        render: (text, item) => {
          return (
            <Button htmlType="button" size="small" icon="link" onClick={()=>this.props.onSelect(item)}>
              引用
            </Button>
          );
        },
      },
    ];

    return (
      <div>
        <Modal
          title="引用答案"
          visible={this.props.visible}
          onOk={this.handleOk}
          onCancel={this.props.onCannel}
          width={700}
          footer={null}
          destroyOnClose
        >
          <Row style={{marginBottom:'10px'}}>
            <Col span={5} style={{marginRight:'10px'}}>
              <TreeSelect
                showSearch
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="全部分类"
                allowClear
                treeDefaultExpandAll
                onChange={(val) => this.onChange(val,1)}
              >
                {renderTreeNode(this.props.treeData)}
              </TreeSelect>
            </Col>
            <Col span={5}>
              <Search
                placeholder="请输入关键字搜索问题"
                onSearch={value => this.onChange(value,2)}
                style={{ width: 200 }}
              />
            </Col>
          </Row>
          <Table
            dataSource={this.props.answer.list}
            columns={columns}
            rowKey={'id'}
            pagination={{
              total: this.props.answer.total,
              current: this.props.page,
              onChange:this.props.handleQuoteAnswer,
              pageSize:10
            }}
          />
        </Modal>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(QuoteAnswer));
